<html>
	<head>
	<link rel="stylesheet" href="/static/css/jquery.mobile.min.css" />
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/jquery.mobile.min.js"></script>
	<title>OYPAA 2013 Registration</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script>
	  	$(document).bind('pageinit', function(event) {
	    $( "#delete_button" ).bind( "click", function(event, ui) {
	    	var item_key = $(this).attr("key");
	          });
	    });
	</script>
	</head>
	<body>
		<div data-role="page" data-theme="b" id="registration_stats">
			{% macro header(title) -%}
			<div data-role="header" id="header">
				<h1>{{ title }}</h1>
					<div data-role="navbar" data-id="nav">
        				<ul>
        						<li><a href="/admin" data-transition="slide">Registration list</a></li>
        						<li><a href="/#new_registration" data-transition="slide">New Registration</a></li>
                            	<li><a href="/stats" data-transition="slide">Registration Statistics</a></li>
        				</ul>
        			</div>
        	</div>
        	{%- endmacro %}
        	{{ header('Registration Stats') }}
	        <div data-role="content">
	        	<h2>Count</h2>
				<p>{{ count }}</p>
				<h2>Registrations by Location</h2>
				{% for loc in locs %}
				<p>{{ loc.city }}, {{ loc.state }}: {{ loc.count }}</p>
				{% endfor %}
				<h2>Email List</h2>
				<a href="mailto:{{ emails }}">Send Email to List</a> 
				<table>
					<thead>
					<th>Email Address</th>
					</thead>
					<tbody>
					{% for reg in regs %}
					<tr><td>{{ reg.email }}</td></tr>
					{% endfor %}
					</tbody>				
				</table>
	       	</div>
		</div>
	</body>
</html>